<template>
    <div class="gsap">

        <v-md-preview :text="baseMD"></v-md-preview>

        <div class="w-full p-x-40px p-t-0px bg-#fff">
            <h4 class="mb-20px"><span class="btn" @click="animateBox">点击播放</span></h4>
            <div class="p-x-20px p-y-20px bg-#282c34 border-rd-6px">
                <div class="gsap-box">1</div>
            </div>
        </div>

        <v-md-preview :text="timelineMD"></v-md-preview>

        <div class="w-full p-x-40px p-t-0px bg-#fff">
            <h4 class="mb-20px"><span class="btn" @click="timelineClick">点击播放</span></h4>

            <div class="gsap-box-group p-x-20px p-y-20px bg-#282c34 border-rd-6px">
                <div class="box1">1</div>
                <div class="box2">2</div>
                <div class="box3">3</div>
            </div>
        </div>


        <v-md-preview :text="controlMD"></v-md-preview>

        <div class="w-full p-x-40px p-t-0px bg-#fff">

            <div class="gsap-box-group p-x-20px p-y-20px bg-#282c34 border-rd-6px">
                <div class="box4">4</div>
            </div>
            <div style="margin-bottom:20px;" class="mt-20px">
                <span class="btn" @click="controlClick('play')">播放</span>
                <span class="btn" @click="controlClick('pause')">暂停</span>
                <span class="btn" @click="controlClick('resume')">恢复</span>
                <span class="btn" @click="controlClick('reverse')">反转</span>
            </div>
            <div style="margin-bottom:20px;">
                <span class="btn" @click="controlClick('seek')">切入动画0.5s时间点的状态</span>
                <span class="btn" @click="controlClick('1/4')">切入动画1/4的节点的状态</span>
            </div>
            <div>
                <span class="btn" @click="controlClick('zoom')">运动缩减到0.5倍</span>
                <span class="btn" @click="controlClick('speed')">运动加速到2倍</span>
                <span class="btn">销毁实例</span>
            </div>
        </div>

        <v-md-preview :text="keyMD"></v-md-preview>

        <div class="w-full p-x-40px p-t-0px bg-#fff">
            <h4 class="mb-20px"><span class="btn" @click="keyframeAnim">点击播放</span></h4>

            <div class="gsap-box-group p-x-20px p-y-20px bg-#282c34 border-rd-6px"
                style="height: 200px;padding: 20px;box-sizing: border-box;">
                <div class="box5">5</div>
            </div>
        </div>

     
        <v-md-preview :text="scroll"></v-md-preview>
    </div>
</template>

<script setup>
import gsap from 'gsap';
import { onMounted, ref } from 'vue';

// 基本动画
const baseMD = ref('');
// 时间线动画
const timelineMD = ref('');
// 控制动画
const controlMD = ref('');
// 关键帧动画
const keyMD = ref('');
// 滚动条动画
const scroll = ref('');
const animateBox = () => {
    gsap.to(".gsap-box", { x: 200, rotation: 360, duration: 2, yoyo: true, repeat: 1 });
}
const timelineClick = () => {
    // 创建一个Timeline类型的实例
    let tl = gsap.timeline()

    // 把tween动画添加到timeline实例上，注意我们在用的是tl.to 而不是gsap.to
    tl.to(".box1", { x: 400, duration: 1, repeat: 1, yoyo: true }, 1);
    tl.to(".box2", { x: 400, duration: 1, repeat: 1, yoyo: true }, "<");
    tl.to(".box3", { x: 400, duration: 1, repeat: 1, yoyo: true }, "+=1");
}

// 通过一个变量保存对Tween或者Timeline实例的引用
let tween = ref();

onMounted(() => {
    tween.value = gsap.to(".box4", { duration: 2, x: 400, ease: 'linear' });
    tween.value.pause();

    fetch('md/gsap/base.md')
        .then(res => res.text())
        .then(md => {
            baseMD.value = md;
        })
    fetch('md/gsap/timeline.md')
        .then(res => res.text())
        .then(md => {
            timelineMD.value = md;
        })
    fetch('md/gsap/control.md')
        .then(res => res.text())
        .then(md => {
            controlMD.value = md;
        })
    fetch('md/gsap/keyframe.md')
        .then(res => res.text())
        .then(md => {
            keyMD.value = md;
        })
    fetch('md/gsap/scroll.md')
        .then(res => res.text())
        .then(md => {
            scroll.value = md;
        })
})

const controlClick = (type = "") => {
    switch (type) {
        case 'play':
            tween.value.play();
            break;
        case 'pause':
            tween.value.pause();
            break;
        case 'resume':
            tween.value.resume();
            break;
        case 'reverse':
            tween.value.reverse();
            break;
        case 'seek':
            tween.value.seek(0.5);
            break;
        case 'zoom':
            tween.value.timeScale(0.5);
            break;
        case '1/4':
            tween.value.progress(0.25);
            break;
        case 'speed':
            tween.value.timeScale(2);
            break;
        case 'destroy':
            tween.value.kill();
            break;
        default:
            break;
    }
}

let keyframeAnimIsPlaying = ref(false)
const keyframeAnim = () => {

    if (keyframeAnimIsPlaying.value) return;
    keyframeAnimIsPlaying.value = true;
    // timeline
    // let tl = gsap.timeline();
    // tl.to(".box5", {
    //     x: 100
    // })
    //     .to(".box5", {
    //         y: 100
    //     })
    //     .to(".box5", {
    //         x: 0
    //     })
    //     .to(".box5", {
    //         y: 0
    //     });

    // 用数组的方式
    gsap.to(".box5", {
        keyframes: {
            x: [0, 100, 100, 0, 0],
            y: [0, 0, 100, 100, 0],
            ease: "power1.inOut"
        },
        duration: 2,
        onComplete: () => {
            keyframeAnimIsPlaying.value = false;
        }
    });
}
</script>

<style lang="scss" scoped>
.gsap {
    width: 100%;
    height: 100%;
    overflow-y: auto;

    // @include flex();
    // span{
    //     transform: translateY(-100px);
    //     font-size: 20px;
    // }
    .btn {
        padding: 4px 10px;
        background: #0f111a;
        color: #fff;
        cursor: pointer;
        margin-right: 10px;
        user-select: none;
    }

    .gsap-box {
        width: 50px;
        height: 50px;
        background-color: #fff;
        @include flex();
        border: 1px solid #ccc;
    }

    .gsap-box-group {
        display: flex;
        flex-direction: column;

        div {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            @include flex();
            background-color: #fff;
            border: 1px solid #ccc;
        }
    }

    .code {
        padding: 20px;
        background: #0f111a;
        color: #f5f5f5;

        .green {
            color: #00bd48;
        }

        .code-img {
            width: 100%;
        }
    }
}
</style>